<template>
  <div>
    <div class="login-parsel">
      <p style="padding-top:1.5rem;">
        <el-icon style="font-size: 1.2rem" @click="router.go(-1)"
          ><Back
        /></el-icon>
      </p>
      <p style="font-size: 1.5rem;padding-top:1.5rem;">输入验证码</p>
      <p style="font-size: 0.9rem; color: gray; line-height: 0.1rem;padding-top:1.5rem;">
        文字描述信息示例
      </p>
      <div
        style="
          width: 90vw;
          height: auto;
          margin: 0 auto;
          margin-top: 3.5rem;
          display: flex;
          justify-content: space-around;
        "
      >
        <input class="numbox" v-model="val1"  @focus="show = true"/>
        <input class="numbox" v-model="val2" @focus="show = true"/>
        <input class="numbox" v-model="val3" @focus="show = true"/>
        <input class="numbox" v-model="val4" @focus="show = true"/>
      </div>
      <p style="text-align: center; color: gray; margin-top: 3rem">
        您可以在{{ second }}秒内重新发送验证
      </p>
      <p style="text-align: center; color: rgb(255, 185, 0)">重新发送验证</p>

      <van-number-keyboard
        :show="show"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter,useRoute } from "vue-router";
import { Back } from "@element-plus/icons-vue";
import { NumberKeyboard,showToast } from "vant";

const router = useRouter();
const route=useRoute();
const second = ref(60);
const val1 = ref("");
const val2 = ref("");
const val3 = ref("");
const val4 = ref("");
const show = ref(true);


const onDelete = () => showToast('删除');

let currentIndex = ref(0);

const inputs = reactive([val1,val2,val3,val4])

const onInput =(value)=>{
    inputs[currentIndex.value].value =value;
    currentIndex.value++;
    if(currentIndex.value == 4){
        router.push({
          path:'/createpwd',
          query:{
            email:route.query.email
          }
        })
    }
}


onMounted(() => {
  let timer = setInterval(() => {
    second.value--;
    if (second.value == 0) {
      clearInterval(timer);
    }
  }, 1000);
});
</script>

<style lang="scss" scoped>
.login-parsel {
  width: 90vw;
  height: auto;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
}
.numbox {
  width: 4rem;
  height: 3rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.7rem;
  margin-right: 1rem;
  text-align: center;
}
.numbox:focus {
  background: rgba(255, 185, 0, 0.1);
  border: 1px solid rgb(255, 185, 0);
}
</style>